<template>
  <view class="navbar" :style="{backgroundColor: bgColor}">
   <view class="navbar-top" :style="{height: menuTop + 'px'}"></view>
   <view class="navbar-middle">
     <text class="title" :style="{color: textColor}">{{title}}</text>
   </view>
 </view>
</template>

<script>
export default {
  name: 'nav-bar',
  components: {},
  data() {
    return {
      menuTop: 0,
      menuHeight: 0
    }
  },
  props: {
    title: {
      type: String,
      default: '糖人影视'
    },
    bgColor: {
      type: String,
      default: '#50cc99'
    },
    textColor: {
      type: String,
      default: '#fff'
    }
  },
  mounted() {
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.menuTop = menuButtonInfo.top;
    this.menuHeight = menuButtonInfo.height;
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
  .navbar {
    width: 100%;
    height: auto;
    background-color: #50cc99;
    position: fixed;
    top: 0;
    z-index: 999;
    .navbar-middle {
      height: 44px;
      display: flex;
      justify-content: center;
      .title {
        color: #fff;
        font-size: 34rpx;
      }
    }
  }
</style>